<template>
    <div>
        <div style="box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);height: 90px;width: 100%;">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <div class="breadcrumb">
                    <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item>个人信息</el-breadcrumb-item>
                    <el-breadcrumb-item>个人信息</el-breadcrumb-item>
                </div>
            </el-breadcrumb>
        </div>
        <div class="imgstyle">
            <el-upload
                    class="avatar-uploader"
                    action="http://49.232.173.48:8080/SysUsers/upload"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload">
                <img v-if="imageUrl" :src="imageUrl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
        </div>
        <div style="height: 20px"></div>
        <el-card style="height: 500px">
            <div v-if="ownList" >
                <span>个人信息</span>
                <el-button type="warning" @click="dialogCompare = true" size="mini" style="float: right">修改密码</el-button>
            </div>
            <div style="margin-top: 20px">用户姓名：
                <el-tag effect="plain" type="info">{{ownList.name}}</el-tag>
            </div>
            <div style="margin-top: 20px">年龄：
                <el-tag effect="plain" type="info">{{ownList.age}}</el-tag>
            </div>
            <div style="margin-top: 20px">身份证号：
                <el-tag effect="plain" type="info">{{ownList.idNum}}</el-tag>
            </div>
            <div style="margin-top: 20px">电话号码：
                <el-tag effect="plain" type="info">{{ownList.tel}}</el-tag>
            </div>
            <div style="margin-top: 20px">住址：
                <el-tag effect="plain" type="info ">{{ownList.address}}</el-tag>
            </div>

        </el-card>
        <!--判断密码是否正确弹框-->
        <el-dialog
                title="提示"
                :visible.sync="dialogCompare"
                width="30%"
                >
            <el-form :inline="true" :model="passwordFrom"  ref="editPasswordRef">
                <el-form-item label="旧密码" prop="oldPassword">
                    <el-input v-model="passwordFrom.oldPassword" placeholder="输入旧密码" style="width: 400px;"></el-input>
                </el-form-item>
                <el-form-item label="新密码" prop="newPassword">
                    <el-input v-model="passwordFrom.newPassword" placeholder="输入新密码" style="width: 400px;"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
            <el-button @click="dialogCompare = false">取 消</el-button>
            <el-button type="primary" @click="editPasswordFrom">确 定</el-button>
            </span>
        </el-dialog>

    </div>
</template>

<script>
    export default {
        created(){
            this.getOwnList()
        },
        methods:{
            //通过登录获取用户数据
            async getOwnList(){
                const {data : resp} = await this.$http.get('/sysUsers/getUserInfo')
                if(resp.code !== 200){
                    return this.$message.error('用户获取失败！')
                }
                this.ownList=resp.data
                console.log(this.ownList)
            },
            async editPasswordFrom(){
                let params = new URLSearchParams()
                params.append('newPassword', this.passwordFrom.newPassword)
                params.append('oldPassword', this.passwordFrom.oldPassword)
                const {data : resp} = await this.$http.post('/sysUsers/changePassword/',params)
                /*console.log(this.passwordFrom)*/
                console.log(this.passwordFrom)
                console.log(resp.code)
                if(resp.code !== 200){
                    return this.$message.error('密码错误！')
                }
                this.$message.success('修改密码成功！')
                window.sessionStorage.clear()
                this.$router.push('/login')

            },
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {});
            },
            //图片上传方法
            handleAvatarSuccess(res, file) {
                this.imageUrl = URL.createObjectURL(file.raw);
            },
            beforeAvatarUpload(file) {
                const isImg = ['image/jpeg','image/png'].includes(file.type) ;
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isImg) {
                    this.$message.error('上传头像图片只能是 JPG,png 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isImg && isLt2M;
            },
        },
        data(){
            return{
                ownList:{
                    name:'',
                    tel:'',
                    address:'',
                    idNum:'',
                    age:'',
                },
                imageUrl: '',
                passwordFrom:{
                    oldPassword:'',
                    newPassword:'',

                },
                dialogCompare: false,
                dialogEdit:false,

            }
        }

    }
</script>


<style scoped>
    .breadcrumb {
        margin-top: 29px;
        margin-left: 20px;
        font-size: 25px
    }
    .imgstyle{
        position:absolute;
        right: 20px;
        top:247px
    }
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }
    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }

</style>
